<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{list-style: none;}
		</style>
		<script type="text/javascript" src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="checkbox" @click="selectAll(event)" v-model="isAll"/>全选
			<hr />
			<ul>
				<li v-for="(item,index) in charts">{{index + 1}}<input type="checkbox" name="" id="" value="" @click="check(index,event)" v-model="item.checked"/> 姓名：{{item.name}}  年龄：{{item.age}}</li>
			</ul>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					isAll:true,
					charts:[
						{name:"张三",age:19,checked:true},
						{name:"李四",age:20,checked:true},
						{name:"王五",age:21,checked:true},
						{name:"赵六",age:22,checked:true},
						{name:"洪七",age:23,checked:true},
					]
				},
				methods:{
					selectAll:function(event){
						var this_ = event.target;
						this.isAll = ! this.isAll;
						for(var i = 0; i < this.charts.length; i++){
							this.charts[i].checked = this.isAll;
						}
					},
					check:function(index,event){
						var target = event.target;
						this.charts[index].checked = !this.charts[index].checked;
						for(var i=0; i < this.charts.length; i++){
							if(!this.charts[i].checked){
								this.isAll = false;
								return;
							}
						}
						this.isAll= true;
					}
				}
			});
		</script>
	</body>
</html>
